<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style type="text/css">

        .triangle{
            width:0px;
            height:0px;
            border-right:6px solid transparent;
            border-left:6px solid transparent;
            border-bottom:6px solid #0984e3;

        }
        .line{
            border-bottom:2px solid #0984e3;
        }

        .quan1{
            border-radius:10px 10px 0px 0px;
            border: 1px dotted #ced6e0;
        }
        .quan2{
            border-radius:0px 0px 10px 10px;
            border: 1px dotted #ced6e0;
        }


        .hollow-compose-many-circles {
            width: 226px;
            height: 259px;
            position: relative;
            border-radius:5px 5px 1px 1px;
            background: radial-gradient(circle at right bottom, transparent 10px, #FF9A9A 0) top right / 51% 137px no-repeat,
            radial-gradient(circle at left bottom, transparent 10px, #FF9A9A 0) top left / 51% 137px no-repeat,
            radial-gradient(circle at right top, transparent 10px, white 0) bottom right / 51% 122px no-repeat,
            radial-gradient(circle at left top, transparent 10px, white 0) bottom left / 51% 122px no-repeat;
            filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2));
        }

        .hollow-compose-many-circles::before {
            content: '';
            width: 206px;
            border: 2px dashed #fff;
            position: absolute;
            left: 0;
            right: 0;
            top: 137px;
            margin: auto;
        }

        .hollow-compose-many-circles::after {
            content: '';
            position: absolute;
            height: 5px;
            width:100%;
            left: 0;
            bottom: -5px;
            background-image: linear-gradient(to right, #eeeeee 5px, transparent 5px, transparent),
            radial-gradient(10px circle at 10px 5px, transparent 5px, #eeeeee 5px);
            background-size: 15px 5px;
        }

        a.a_btn{
            height: 38px;
            line-height: 38px;
            text-align: center;
            width: 178px;
            border-radius: 40px;
            font-size: 14px;
            font-weight: bold;
            display: block;
            margin: auto;
            margin-bottom: 8px;
            /*display: none;*/
            text-decoration: none;
            position: relative;
            margin-top: 10px;
            border: 1px solid #ffc0c0;
            color: #fa8686;
        }

        .a_hover{
            background-color:#fa8686;
            /*color: white;*/

        }

        a.a_btn:hover{
            color:white;
            font-weight: lighter;
        }

    </style>

    <script type="text/javascript">
        // 鼠标移入移出事件
        $('a.a_btn').hover(function() {
            // 鼠标移入时添加hover类
            $(this).addClass('a_hover')
        }, function() {
            // 鼠标移出时移出hover类
            $(this).removeClass('a_hover')
        });

        $('.hollow-compose-many-circles').hover(function() {
            //alert('ddd');
            $(this).children().next().children().next().next().hide();
            $(this).children().next().children().next().next().next().show();
            //alert('dd');
        }, function() {
            $(this).children().next().children().next().next().show();
            $(this).children().next().children().next().next().next().hide();
        });

    </script>
</head>
<body>
    <div style="width: 93%;margin-left: 30px;padding-bottom: 20px;">
        <div class="row" style="background-color: white; padding: 10px 10px 30px 20px" >
            <div>
                <span style="font-size: 25px; color: #0984e3 ">我的优惠券</span>
            </div>
            <div class="triangle" style="margin-left: 20px"></div>
            <div class="line"></div>
            <div style="margin-top: 25px">

                <!--<div class="quan1" style="height: 130px; width: 230px; background-color: #ff6b81">

                </div>
                <div class="quan2" style="height: 130px; width: 230px; background-color: #f1f2f6">

                </div>-->
                <div class="hollow-compose-many-circles" style="text-align: center; float: left;margin-right: 80px;margin-bottom: 50px">
                    <div style="height: 63px; color: white;padding-top:15px">
                        <span style="font-size: 35px">￥</span>
                        <span style="font-size: 65px">20</span>
                        <p style="line-height: 0px">立减券</p>
                    </div>
                    <div style="margin-top: 85px">
                        <span style="font-size: 19px">— 飞机票 —</span>
                        <p style="font-size: 13px; color: #7f8c8d">20元飞机自减券</p>
                        <p style="font-size: 11px; color: #7f8c8d; display: block">
                            <span>有效期:&nbsp;</span>
                            <span>2019-10-28—2020-1-19</span>
                        </p>
                        <!--onclick="this.style.color='black'"-->
                        <a class="a_btn" href="#" style="display: none">立即使用</a>
                    </div>
                </div>
                <div class="hollow-compose-many-circles" style="text-align: center; float: left;margin-right: 80px;margin-bottom: 50px">
                    <div style="height: 63px; color: white;padding-top:15px">
                        <span style="font-size: 35px">￥</span>
                        <span style="font-size: 65px">20</span>
                        <p style="line-height: 0px">立减券</p>
                    </div>
                    <div style="margin-top: 85px">
                        <span style="font-size: 19px">— 飞机票 —</span>
                        <p style="font-size: 13px; color: #7f8c8d">20元火车自减券</p>
                        <p style="font-size: 11px; color: #7f8c8d; display: block">
                            <span>有效期:&nbsp;</span>
                            <span>2019-10-28—2020-1-19</span>
                        </p>
                        <!--onclick="this.style.color='black'"-->
                        <a class="a_btn" href="#" style="display: none">立即使用</a>
                    </div>
                </div>
                <div class="hollow-compose-many-circles" style="text-align: center; float: left;margin-right: 80px;margin-bottom: 50px">
                    <div style="height: 63px; color: white;padding-top:15px">
                        <span style="font-size: 35px">￥</span>
                        <span style="font-size: 65px">20</span>
                        <p style="line-height: 0px">立减券</p>
                    </div>
                    <div style="margin-top: 85px">
                        <span style="font-size: 19px">— 飞机票 —</span>
                        <p style="font-size: 13px; color: #7f8c8d">20元火车自减券</p>
                        <p style="font-size: 11px; color: #7f8c8d; display: block">
                            <span>有效期:&nbsp;</span>
                            <span>2019-10-28—2020-1-19</span>
                        </p>
                        <!--onclick="this.style.color='black'"-->
                        <a class="a_btn" href="#" style="display: none">立即使用</a>
                    </div>
                </div>
                <div class="hollow-compose-many-circles" style="text-align: center; float: left;margin-right: 80px;margin-bottom: 50px">
                    <div style="height: 63px; color: white;padding-top:15px">
                        <span style="font-size: 35px">￥</span>
                        <span style="font-size: 65px">20</span>
                        <p style="line-height: 0px">立减券</p>
                    </div>
                    <div style="margin-top: 85px">
                        <span style="font-size: 19px">— 飞机票 —</span>
                        <p style="font-size: 13px; color: #7f8c8d">20元火车自减券</p>
                        <p style="font-size: 11px; color: #7f8c8d; display: block">
                            <span>有效期:&nbsp;</span>
                            <span>2019-10-28—2020-1-19</span>
                        </p>
                        <!--onclick="this.style.color='black'"-->
                        <a class="a_btn" href="#" style="display: none">立即使用</a>
                    </div>
                </div>


            </div>

        </div>
    </div>


</body>
</html>